{% extends "base.html" %}
{% block title %}登录 - YOUER的电子公文系统{% endblock %}
{% block content %}
<style>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60vh;
    }

    .card {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 450px; /* 增加最大宽度 */
        padding: 20px;
    }

    .card-header {
        background-color: #f0f0f0;
        color: #333;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .form-group {
        position: relative;
        margin-bottom: 15px;
    }

    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-right: 0;
        border-radius: 4px 0 0 4px;
    }

    .btn-primary {
        background-color: #007bff;
        border: none;
        border-radius: 4px;
        padding: 10px 20px;
        color: white;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }
</style>
<div class="login-container">
    <div class="card">
        <div class="card-header">
            登录
        </div>
        <div class="card-body">
            <form action="{{ url_for('login') }}" method="post" class="login-form">
                {{ form.csrf_token }}
                <div class="form-group">
                    {{ form.username.label(class_="sr-only") }}
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        {{ form.username(class_="form-control", placeholder="请输入用户名：") }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form.email.label(class_="sr-only") }}
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                        </div>
                        {{ form.email(class_="form-control", placeholder="请输入邮箱地址：") }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form.password.label(class_="sr-only") }}
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        </div>
                        {{ form.password(class_="form-control", placeholder="请输入密码") }}
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-block">登录</button>
            </form>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('.login-form');
        form.addEventListener('submit', function (e) {
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();
            const email = document.getElementById('email').value.trim();

            if (username === "") {
                e.preventDefault();
                alert('用户名不能为空，请填写完整！');
            } else if (email === "") {
                e.preventDefault();
                alert('邮箱地址不能为空，请填写完整！');
            } else if (password === "") {
                e.preventDefault();
                alert('密码不能为空，请填写完整！');
            }
        });
    });
</script>
{% endblock %}



